<template>
  <div class="detailPage">
    <detail-nav-bar class="detail-nav" />
    <!-- 滚动 -->
    <scroll class="content"
            ref="wrapper"
            :probe-type="3"
            :pull-up-load="true">
      <!-- 详情页轮播图 -->
      <detail-swiper :top-images="topImages" />
      <!-- 商品基础信息 -->
      <detail-pro-base-info :goods="goods" />
      <!-- 店铺信息 -->
      <detail-shop-info :shop="shop" />
      <!--  商品详情及图片展示-->
      <detail-goods-info :detail-info="detailInfo"
                         @imageLoad="imageLoad" />
      <!-- 商品尺码参数 -->
      <detail-params-info :param-info="paramInfo" />
      <!-- 评论信息 -->
      <detail-comment-info :comment-info="commentInfo" />
      <!-- 返回顶部 -->
      <back-top />
    </scroll>

  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailProBaseInfo from './childComps/DetailProBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamsInfo from './childComps/DetailParamsInfo'
import DetailCommentInfo from './childComps/DetailcommentInfo'
// 导入返回顶部组件
import BackTop from 'components/common/BackTop/BackTop'

import Scroll from 'components/common/scroll/Scroll'
//网络请求
import { getDetail, Goods, Shop, GoodsParam } from 'network/detail'
export default {
  name: 'Detail',
  data () {
    return {
      iid: null,
      res: null,
      topImages: [],
      goods: {},//商品
      shop: {},//店铺信息
      detailInfo: {},//商品详情详细信息
      paramInfo: {},//参数信息
      commentInfo: {}
    }
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailProBaseInfo,//商品基础信息,
    DetailShopInfo,
    DetailGoodsInfo,//商品详情
    DetailParamsInfo,//尺码
    DetailCommentInfo,//评论

    Scroll,
    BackTop

  },
  created () {
    //1、保存传入的iid
    // console.log(this.$route.params);
    this.iid = this.$route.query.iid;
    //2、根据iid请求详情数据
    getDetail(this.iid).then(res => {
      //1、/ 1.获取顶部的图片详情数据
      console.log(res);
      const data = res.result
      this.topImages = data.itemInfo.topImages
      // 2.获取商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // console.log(this.goods);
      //3、创建店铺信息
      this.shop = new Shop(
        data.shopInfo
      );
      // console.log(this.shop);
      // 4.获取商品详细信息
      this.detailInfo = data.detailInfo;
      // console.log(this.detailInfo);
      //5、商品参数获取
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule,
      )
      //6、评论信息
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0]
      }
    })
  },
  methods: {
    // 监听商品图片加载
    imageLoad () {
      //加载完成刷新
      this.$refs.wrapper.refresh()
    }

  },
}
</script>
<style scoped>
.detailPage {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}
.content {
  /* calc使用时一定要注意中间的空格 */
  height: calc(100% - 44px);
  overflow: hidden;
}
.nav-bar {
  position: relative;
  z-index: 9;
  background: #fff;
}
</style>